<template>
	<div>
		<div class="main_operation">
			<div class="operation_left"></div>
			<div class="operation_right">
        <span class="fxBox" style="width: 40px;">日期:</span>
        <a-range-picker style="width: 220px" class="mr5"  @change="onDateChange" />
        <span class="fxBox" style="width: 40px;">设备:</span>
        <a-select allowClear v-model="formList.equipment_id" style="width: 250px" placeholder="请选择设备">
          <a-select-option v-for="item in equipmentData" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
        </a-select>
        <span class="fxBox" style="width: 40px;">品名:</span>
        <a-select allowClear class="mr10" v-model="formList.goods_id" style="width: 200px" placeholder="请选择品名">
          <a-select-option v-for="item in goodsAllData" :value="item.id" :key="item.id">{{item.goods_name}}</a-select-option>
        </a-select>
        <a-button class="mr10" type="primary" @click="()=>{page=1;changeData()}">搜索</a-button>
        <!-- <a-button class="mr10" type="primary">下载数据</a-button> -->
      </div>
		</div>
		<!-- <a-alert v-if="testAlert" :message="textAlert" type="success" banner showIcon /> -->
		<!-- <div style="height: 37px;" v-else></div> -->
		<!-- <a-alert v-else message="检验" type="info" showIcon /> -->
		<div class="main">
		  <a-table :pagination="false" :loading="tableLoad" :columns="Fields" :dataSource="dataLists.data"
		    :rowKey="record => record.id" :scroll="{x: 1000, y: 500 }">
		  </a-table>
		  <div class="pageBox">
		    <a-pagination :total="dataLists.total" :showTotal="total => `共 ${total} 条数据`" :pageSize="dataLists.per_page"
		      :defaultCurrent="1" @change="pageChange" />
		  </div>
		</div>
	</div>
</template>

<script>
    import { mapState, mapActions } from 'vuex';
    export default {
        name: "quarantine",
				data() {
					return {
            /* 通用模块 */
            //列表
            tableLoad: false, //列表loading状态
            formList: { //列表信息
              check_status: 2,
              page: 1
            },
            /* 通用模块end */
					}
				},
				mounted() {
          this.goodsAll()
          this.equipmentAll()
					this.changeData()
				},
        computed: {
          ...mapState({
            Fields: state => state.checkStock.Fields,
            dataLists: state => state.checkStock.dataLists,
            requestCode: state => state.checkStock.requestCode,
            equipmentData: state => state.equipment.equipmentData,
            goodsAllData: state => state.productName.goodsAllData,//品名All列表(正式)       
          }),
        },
				methods: {
          /* 通用模块 */
          /* 接口 */
          ...mapActions({
            getLists: 'checkStock/getLists', //列表
            testing: 'checkStock/testing', //检测
            equipmentAll: 'equipment/equipmentAll', //所有设备名称
            goodsAll: 'productName/goodsAll',        //所有品名信息(正式)
          }),
          // 勾选
          onSelectChange(selectedRowKeys) {
            console.log('selectedRowKeys changed: ', selectedRowKeys);
            this.selectedRowKeys = selectedRowKeys
          },
          // 重新获取列表数据
          changeData() {
            this.tableLoad = true
            setTimeout(() => {
              this.getLists(this.formList)
              this.tableLoad = false
            }, 800);
          },
          //搜索
          onSearch(val) {
            this.formList = { //列表信息
              type_name: val,
              page: 1
            }
            this.changeData()
          },
          // 页码
          pageChange(page) {
            this.formList.page = page;
            this.getLists(this.formList)
          },
          /* 通用模块end */

          //已检统计
          // statisticsBtn() {
          // 	const jumpUrl = `/stock/Statistics`;
          // 	this.$router.push({ path: jumpUrl });
          // },
				},
    }
</script>

<style scoped>
	.tableBox{
		width:100%;
    table-layout : fixed;
    text-align: center;
	}
	.tableBox tr.title{
		background: #fafafa;padding: 16px;
	}
	.tableBox th{
    width: 50%;
		padding: 12px 0;
		border-bottom: 1px solid #CCCCCC;
	}
	.tableBox td{
    width: 50%;
		padding: 12px 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
	}
</style>
